<template>
	<view class="container">
		<view class="search" :style="{ top: `${windowTop}px` }">
			<view class="search-input">
				<image src="../../static/imgs/home/search.png"></image>
				<input v-model="searchVal" placeholder="请搜索课程" @confirm="getData"/>
			</view>
		</view>
		<!-- <view class="search-hot" v-if="searchVal.length==0">
			<view class="search-hot_title text_black">推荐搜索课程</view>
			<view class="search-hot_content">
				<view class="search-hot_content_item text_opblack" 
				v-for="(item,index) in hotList" :key="index" @click="clickitem(item)">
					{{item}}
				</view>
			</view>
		</view> -->
		<view class="list" v-if="newList.length>0">
			<view class="list-news">
				<newList :list="newList" imgField="img" titleField="title" tipsField="tips" numField="count" @handleClick="newItem"></newList>
			</view>
		</view>
	</view>
</template>

<script>
	import newList from "../../components/new_list/index.vue";
	import {searchCourse} from "../../static/js/api/course.js";
	export default {
		components: {
			newList,
		},
		data() {
			return {
				searchVal: "",
				newList: [],
				hotList:["50米跑","肺活量","BMI指数改善"],
				userInfo: {
					school: 1, //0无合作1有合作
				},
				windowTop:0,
			}
		},
		watch:{
			'searchVal':function(val){
				console.log(val.length)
				if(val.length==0){
					this.newList = []
				}
			}
		},
		onLoad() {
			this.windowTop = uni.getSystemInfoSync().windowTop
		},
		methods: {
			clickitem(item){
				this.searchVal = item
				this.getData()
			},
			getData(){
				let _this = this
				searchCourse({
					title:_this.searchVal,
					page:1,
					per_page:9999
				}).then(res=>{
					console.log(res.courses)
					if(res.courses){
						res.courses.forEach(item=>{
							item.tips = '类型 '+item.category_name
						})
					}
					this.newList = res.courses
				})
			},
			newItem(item){
				uni.navigateTo({
					url:"/pages/basicCourse/course?courseInfo="+JSON.stringify(item)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./index.scss");
	.search-hot{
		width: calc(100% - 60rpx);
		padding: 30rpx 30rpx;
		background-color: #fff;
		margin-top: 120rpx;
		&_title{
			font-size: 24rpx;
			font-weight: 400;
		}
		&_content{
			display: flex;
			flex-wrap: wrap;
			&_item{
				padding: 0 30rpx;
				height:60rpx;
				line-height:60rpx;
				background: rgba(0,0,0,0.05);
				border-radius: 10rpx 10rpx;
				margin-right: 20rpx;
				margin-top: 20rpx;
			}
		}
	}
	.search-input{
		width: 690rpx!important;
		margin-left: 30rpx;
	}
	.text_black {
		color: $uni-text-color-black !important;
	}

	.text_opblack {
		color: $uni-text-color-opblack !important;
	}
	
	.list{
		margin-top: 120rpx;
	}
</style>